<!DOCTYPE html>
<html>
<head>
    <title>玩转spring boot——websocket</title>
    <script src="${request.contextPath}/statics/plugins/push/angular.min.js"></script>
    <script src="${request.contextPath}/statics/plugins/push/sockjs.min.js"></script>
    <script src="${request.contextPath}/statics/plugins/push/stomp.min.js"></script>
    <script type="text/javascript">
        /*<![CDATA[*/

        var stompClient = null;

        var app = angular.module('app', []);
        app.controller('MainController', function($rootScope, $scope, $http) {

            $scope.data = {
                //连接状态
                connected : false,
                //消息
                message : '',
                rows : []
            };

            //连接
            $scope.connect = function() {
                var socket = new SockJS('instructionsWebSocket');
                stompClient = Stomp.over(socket);
                stompClient.connect({}, function(frame) {
                    // 注册发送消息
                    stompClient.subscribe('/topic/send', function(msg) {
                        $scope.data.rows.push(JSON.parse(msg.body));
                        $scope.data.connected = true;
                        $scope.$apply();
                    });
                    // 订阅 /user/topic/chat 实现点对点聊
                    stompClient.subscribe('/user/topic/chat', function (message) {
                        // showMessage(JSON.parse(message.body));
                    });
                    // 注册推送时间回调
                    stompClient.subscribe('/topic/callback', function(r) {
                        $scope.data.time = '当前服务器时间：' + r.body;
                        $scope.data.connected = true;
                        $scope.$apply();
                    });

                    $scope.data.connected = true;
                    $scope.$apply();
                });
            };

            $scope.disconnect = function() {
                if (stompClient != null) {
                    stompClient.disconnect();
                }
                $scope.data.connected = false;
            }

            $scope.send = function() {//发消息
                stompClient.send("/webSocket/send", {}, JSON.stringify({
                    'message' : $scope.data.message
                }));
            }
        });
        /*]]>*/

        //链接endpoint名称为 "/endpointChat" 的endpoint。 // 指定用户型
      /*  var sock = new SockJS("/instructionsWebSocket");
        var stomp = Stomp.over(sock);
        stomp.connect('guest', 'guest', function(frame) {

            /!**  订阅了/user/queue/notifications 发送的消息,这里雨在控制器的 convertAndSendToUser 定义的地址保持一致, 
             *  这里多用了一个/user,并且这个user 是必须的,使用user 才会发送消息到指定的用户。 
             *  *!/
            stomp.subscribe("/user/queue/notifications", handleNotification);
        });*/
    </script>
</head>
<body ng-app="app" ng-controller="MainController">

<h2>玩转spring boot——websocket</h2>


<label>WebSocket连接状态:</label>
<button type="button" ng-disabled="data.connected" ng-click="connect()">连接</button>
<button type="button" ng-click="disconnect()"
        ng-disabled="!data.connected">断开</button>
<br />
<br />
<div ng-show="data.connected">
    <label>{{data.time}}</label> <br /> <br /> <input type="text"
                                                      ng-model="data.message" placeholder="请输入内容..." />
    <button ng-click="send()" type="button">发送</button>
    <br /> <br /> 消息列表： <br />
    <table>
        <thead>
        <tr>
            <th>内容</th>
            <th>时间</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="row in data.rows">
            <td>{{row.message}}</td>
            <td>{{row.date}}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>